import React from 'react'
import '../assets/css/home.css'
import { CapsuleTabs } from 'antd-mobile'
import { getGoodsHome, getNew, getseckill } from '../request/api'
import { Link } from 'react-router-dom'
class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            list: [],
            list2: [],
            list3: [],
            list4: [],
            list5: [],
            getkill: []

        }
    }
    componentDidMount() {
        getGoodsHome()
            .then(res => {
                if (res.data.code == 200) {
                    this.setState({
                        list2: res.data.list[0].content,
                        list3: res.data.list[1].content,
                        list4: res.data.list[2].content,
                        list5: res.data.list[3].content
                    })
                }

            })
        getNew()
            .then(res => {
                if (res.data.code == 200) {
                    this.setState({
                        list: res.data.list
                    })
                }
            })
        getseckill()
            .then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.setState({
                        getkill: res.data.list
                    })
                }
            })
    }
    render() {
        const { list, list2, list3, list4, list5, getkill } = this.state
        return (<div>
            <header>
                <div className="headertop">
                    <img className='xiaou' src={require('../assets/img/piclogowhite-2@3x.png')} alt="" />
                    <div className='from'>
                        <img src={require('../assets/img/搜索.png')} alt="" />
                        <input type="text" placeholder='搜索商品' />
                        <button className='a'>搜索</button>
                    </div>
                    <img className='jian' src={require('../assets/img/icon_location@3x.png')} alt="" />


                </div>
            </header>
            <div className='home_bg'>
                <h1>新人专享</h1>
                <p>05</p>
                <span>：</span>
                <p>42</p>
                <span>：</span>
                <p>47</p>
                <div className='quan'>
                    查看全部》
                </div>

                <div className='tu'>
                    <a href="#" className='a'>1重礼</a>
                    <span>信任特价商品专区</span>
                    <span>(限量供应，先到先得)</span>
                    <ul>
                        {
                            list.map((item) => {
                                return (
                                    <li key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} >
                                            <img src={item.img} alt="" />
                                            <span>{item.price}</span>
                                            <img className='gowu' src={require('../assets/img/home_icon_gouwuche@3x.png')} alt="" />
                                            <br />
                                            <del>{item.market_price}</del>
                                        </Link>

                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className='home-ticke'>
                    <a href="#" className='a'>2重礼</a>
                    <span>新人通用50元礼券</span>
                    <span>(下单立减，省了又省)</span>
                    <img className='small' src={require('../assets/img/优惠券@3x.png')} alt="" />
                    <img className='big' src={require('../assets/img/优惠券领取@3x.png')} alt="" />
                </div>

            </div>
            <div className='home_menu'>
                <img src={require('../assets/img/iconindexkingkong@3x.png')} alt="" />
                <img src={require('../assets/img/iconindexkingkong备份@3x.png')} alt="" />
                <img src={require('../assets/img/iconindexkingkong备份-2@3x.png')} alt="" />
                <img src={require('../assets/img/iconindexkingkong备份-3@3x.png')} alt="" />
                <img src={require('../assets/img/iconindexkingkong备份-4@3x.png')} alt="" />
            </div>
            <div className='miaosha'>
                <h1>超级秒杀</h1>
                <p>05</p>
                <span>：</span>
                <p>42</p>
                <span>：</span>
                <p>47</p>
                {
                    getkill.map(item => {
                        return (
                            <div key={item.id}>
                                <Link to={'/detail'} state={{ id: item.id }} className='miaosha_img'>
                                    <img src={item.img} alt="" />
                                    <div className='Right'>
                                        <button>7.9折</button> <br />
                                        <span>{item.goodsname}</span>
                                        <img src={require('../assets/img/矩形.png')} alt="" />
                                        <span className='sp'>每人限购一件</span>
                                        <button className='button'>
                                            <span>{item.market_price} /</span>

                                            <del>{item.price}</del>
                                            <a href="#">马上抢</a>
                                        </button>
                                    </div>
                                </Link>


                            </div>
                        )
                    })
                }

                <div className='tu'>
                    <a href="#" className='a'>1重礼</a>
                    <span>信任特价商品专区</span>
                    <span>(限量供应，先到先得)</span>
                    <ul>
                        {
                            list.map((item) => {
                                return (
                                    <li key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} >
                                            <img src={item.img} alt="" />
                                            <span>{item.price}</span>
                                            <img className='gowu' src={require('../assets/img/home_icon_gouwuche@3x.png')} alt="" />
                                            <br />
                                            <del>{item.market_price}</del>
                                        </Link>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="picplatein">
                    <div className='lef'>
                        <span>双11尖货预约</span>
                        <img src={require('../assets/img/cardplateindexkingkongbig@3x.png')} alt="" />
                    </div>
                    <div className="rig">
                        <span>畅购全国</span> <br />
                        <img src={require('../assets/img/picplateindexkingkongbig@3x.png')} alt="" />
                        <img src={require('../assets/img/cardplateindexkingkongbig-zEr2mN_fw1200@3x.png')} alt="" />
                    </div>
                </div>
                {/* <ul className='liebiao'>
                    <li>综合推荐</li>
                    <li>销量</li>
                    <li>价格
                        <img src={require('../assets/img/价格.png')} alt="" />
                    </li>
                    <li>好评度</li>
                    <li>店铺</li>
                    <li> <img src={require('../assets/img/分类.png')} alt="" />
                        分类</li>
                </ul> */}
                {/* 胶囊选项卡 */}
                <CapsuleTabs>
                    <CapsuleTabs.Tab title="销量" key="fruits" >
                        {
                            list2.map((item) => {
                                return (

                                    <div key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} className='miaosha_img1'>
                                            <img src={item.img} alt="" />
                                            <div className='Right'>
                                                <button>7.9折</button> <br />
                                                <span className='spn1'>{item.goodsname}</span>
                                                <span className='spn'>￥{item.market_price}</span>
                                                <br />
                                                <del>￥199.00</del>
                                                <button className='button'>
                                                    加入购物车
                                                </button>
                                            </div>
                                        </Link>


                                    </div>
                                )
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title="价格" key="vegetables">
                        {
                            list3.map((item) => {
                                return (
                                    <div key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} className='miaosha_img1'>
                                            <img src={item.img} alt="" />
                                            <div className='Right'>
                                                <button>7.9折</button> <br />
                                                <span className='spn1'>{item.goodsname}</span>
                                                <span className='spn'>￥{item.market_price}</span>
                                                <br />
                                                <del>￥199.00</del>
                                                <button className='button'>
                                                    加入购物车
                                                </button>
                                            </div>
                                        </Link>

                                    </div>
                                )
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title="好评度" key="animals">
                        {
                            list4.map((item) => {
                                return (
                                    <div key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} className='miaosha_img1'>
                                            <img src={item.img} alt="" />
                                            <div className='Right'>
                                                <button>7.9折</button> <br />
                                                <span className='spn1'>{item.goodsname}</span>
                                                <span className='spn'>￥{item.market_price}</span>
                                                <br />
                                                <del>￥199.00</del>
                                                <button className='button'>
                                                    加入购物车
                                                </button>
                                            </div>
                                        </Link>


                                    </div>
                                )
                            })
                        }
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title="店铺" key="dianpu">
                        {
                            list5.map((item) => {
                                return (
                                    <div key={item.id}>
                                        <Link to={'/detail'} state={{ id: item.id }} className='miaosha_img1'>
                                            <img src={item.img} alt="" />
                                            <div className='Right'>
                                                <button>7.9折</button> <br />
                                                <span className='spn1'>{item.goodsname}</span>
                                                <span className='spn'>￥{item.market_price}</span>
                                                <br />
                                                <del>￥199.00</del>
                                                <button className='button'>
                                                    加入购物车
                                                </button>
                                            </div>
                                        </Link>
                                    </div>
                                )
                            })
                        }
                    </CapsuleTabs.Tab>
                </CapsuleTabs>


            </div>
        </div>)
    }
}
export default Home